<template>
  <Menu
      mode="horizontal"
      theme="light"
      :active-name="active_name"
      @on-select="changeMenu"
      class="menu"
  >
    <router-link to="/" @click="active_name='home'">
      <div class="layout-logo"> DOC</div>
    </router-link>
    <div>
      <MenuItem name="home" :to="{name:'Index'}">
        <Icon type="ios-home"/>
        首页
      </MenuItem>
      <MenuItem name="articles" :to="{name:'ArticleIndex'}">
        <Icon type="ios-paper-outline"/>
        文章
      </MenuItem>
    </div>
    <div class="layout-nav">
      <Row justify="end">
        <Col class="layout-nav-item"  @click="showSearch">
          <Icon type="ios-search" size="20"   />
        </Col>
<!--        <Col class="layout-nav-item"  @click="showKeyEnter" >-->
<!--          <Icon type="md-key" size="20"  />-->
<!--        </Col>-->
<!--        <Col class="layout-nav-item">-->
<!--      todo 暂未完成    -->
<!--          <Dropdown trigger="click">-->
<!--            <a style="color: rgb(81, 90, 110)" href="javascript:void(0)">-->
<!--              <Icon type="ios-globe-outline" size="20" />-->
<!--            </a>-->
<!--            <template #list>-->
<!--              <DropdownMenu>-->
<!--                <DropdownItem name="en">English</DropdownItem>-->
<!--                <DropdownItem name="ch">中文</DropdownItem>-->
<!--              </DropdownMenu>-->
<!--            </template>-->
<!--          </Dropdown>-->

<!--        </Col>-->
      </Row>
    </div>
  </Menu>
<!--  <Modal v-model="show_key_enter" fullscreen footer-hide>-->
<!--    <div style="width: 100%;text-align: center;margin-top: 20px;">-->
<!--      <Input-->
<!--          v-model="key"-->
<!--          prefix="md-key"-->
<!--          placeholder="请输入密码并点击回车..."-->
<!--          size="large"-->
<!--          autofocus-->
<!--          style="width: 400px"-->
<!--          @keyup.enter="doGetAuthorization"-->
<!--      />-->
<!--    </div>-->
<!--  </Modal>-->

  <Drawer
      v-model="show_search"
      width="720"
      :styles="styles"
      :closable="false"
  >
    <div style="width: 90%;margin: auto;">
      <Input size="large" v-model="search_input" @keyup.enter="doSearch">
        <template #append>
          <Button icon="ios-search" style="min-width: 50px" @click="doSearch"></Button>
        </template>
      </Input>
      <Alert v-show="warning" style="margin-top: 10px" fade type="warning">请输入查询内容...</Alert>
    </div>
    <Card v-show="list.length > 0  || loading || (show_no_data && list.length === 0)" style="width:90%;margin:20px auto"
          dis-hover>
      <Skeleton :loading="loading" :round="true" :title="false" animated/>
      <Skeleton :loading="show_no_data" animated>
        <template #template>
          <div style="width: 100%;height: 60px;text-align: center;margin-top: 35px">
            没有数据
          </div>
        </template>
      </Skeleton>
      <p v-show="!loading" class="rate-demo" v-for="(item,index) in list" :key="index">
        <router-link style="margin-top: 8px" :to="{ name: 'Article', params: { id: item.id }}"
                     @click="show_search=false">
          {{ item.title }}
        </router-link>
        <span>
           {{ item.update_at ? item.update_at : item.create_at }}
        </span>
      </p>
    </Card>
  </Drawer>
</template>
<script>

import { searchArticle } from '../api/article'
import { getAuthorization } from '../api/authorize'

export default {
  data() {
    return {
      loading: false,
      warning: false,
      show_search: false,
      show_key_enter: false,
      show_no_data: false,
      active_name: null,
      search_input: null,
      data: [],
      styles: {
        overflow: 'auto',
        paddingBottom: '53px',
        position: 'static'
      },
      list: [],
      key: ''
    }
  },
  methods: {
    changeMenu(name) {
      this.active_name = name
    },
    search() {
      searchArticle(this.search_input).then((res) => {
        this.data = res.data
      }).catch(() => {
      })
    },
    showSearch() {
      this.show_search = true
    },
    showKeyEnter() {
      this.show_key_enter = true
    },

    doGetAuthorization() {
      if (this.key.length < 3) {
        this.$Message.error('请输入密码')
        return
      }
      getAuthorization({ key: this.key }).then((res) => {
        localStorage.setItem('access_key', this.key)
        this.$router.go(0)
        this.show_key_enter = false
      }).catch(() => {
        localStorage.setItem('access_key', '')
        this.show_key_enter = false
      })
    },

    doSearch() {
      // 必须输入内容
      if (!this.search_input) {
        this.warning = true
        return
      }

      // 请求中防止再点击查询
      if (this.loading) {
        return
      }

      this.list = []
      this.loading = true
      this.show_no_data = false
      searchArticle({ search: this.search_input }).then((res) => {
        this.list = res.data

        if (res.data.length < 1) {
          this.show_no_data = true
        }
        this.loading = false
      }).catch(() => {
        this.loading = false
      })
      this.warning = false
    }
  }
}
</script>
<style scoped>
.menu {
  box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1);
  z-index: 44;
  position: fixed;
  width: 100%;
}

.layout-logo {
  width: 150px;
  height: 50px;
  float: left;
  position: relative;
  font-size: 19pt;
  text-align: center;
  font-weight: bolder;
  color: black;
}

.layout-nav {
  width: 420px;
  margin: 0 60px;
  float: right;
}

.rate-demo {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.layout-nav-item{
  width: 40px;
  text-align: center;
  cursor: pointer;
}

.layout-nav-item:hover {
  background-color: #fafafa;
}

</style>
